<template>
  <!--  头部导航-->
  <div class="nav_bg">
    <div class="center">
      <el-row>
        <el-col :span="18">
          <ul>
            <li>
              <RouterLink to="/user/index">商城首页</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/orderList">我的订单</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/collectList">我的收藏</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/info">个人信息</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/password">修改密码</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/addrList">地址管理</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/recharge">账户充值</RouterLink>
            </li>
          </ul>
        </el-col>

        <el-col :span="6">
          <ul class="user">
            <template v-if="!userStore.userInfo">
              <li>
                <RouterLink to="/user/reg">注册</RouterLink>
              </li>
              <li>
                <RouterLink to="/user/login">登录</RouterLink>
              </li>
            </template>
            <template v-else>
              <li style="color: aqua;font-weight:bold;font-size: 17px">
                <RouterLink to="/user/center">
                  欢迎{{ userStore.userInfo.username }}
                </RouterLink>
              </li>
              <li class="shop">
                <RouterLink to="/user/cart">
                  <el-icon>
                    <ShoppingCartFull/>
                  </el-icon>
                </RouterLink>
              </li>
              <li>
                <el-link @click="logout">退出</el-link>
              </li>
            </template>
          </ul>
        </el-col>

      </el-row>
    </div>
  </div>

  <!--  头部搜索-->
  <div class="center">
    <el-row>
      <el-col :span="16">
        <img src="/src/assets/banner/1.png" style="height: 90px">
      </el-col>
      <el-col :span="8">
        <div class="search">
          <!--  搜索按钮-->
          <el-button type="primary" class="search_btn" @click="searchKeyword()">
            <el-icon>
              <Search/>
            </el-icon>
          </el-button>
          <!--  搜索框-->
          <el-input type="text" class="search_input"
                    v-model="search"
                    @keyup.enter="searchKeyword()"
                    placeholder="请输入要查询的商品"/>
        </div>
      </el-col>
    </el-row>
  </div>
  <!--  上架的第一级分类-->
  <div class="center">
    <ul class="category">
      <li v-for="(category,index) in parentList" :key="index">
        <RouterLink :to="`/user/search/${category.id}`">{{ category.name }}</RouterLink>
      </li>
    </ul>
  </div>
</template>
<script setup>
import {Search, ShoppingCartFull, User} from "@element-plus/icons-vue";
import categoryApi from "@/api/categoryApi.js";
import {ref} from "vue";
import {ElNotification} from "element-plus";
import {useUserStore} from '@/stores/user.js';
import {useTokenStore} from "@/stores/token.js";
import {useRouter} from 'vue-router';

const tokenStore = useTokenStore();
const userStore = useUserStore();
const router = useRouter();
const parentList = ref([])
const search = ref('');

function searchKeyword() {
  //跳转到搜索页面
  router.push(`/user/search/0/${search.value}`);
  search.value = '';
}

//1.获取父分类--2.上架
function getParent() {
  const condition = {
    parentId: 0,
    status: 1
  }
  categoryApi.selectByPage(condition)
      .then(resp => {
        //console.log(resp.data)
        parentList.value = resp.data
      })
}

//注销--退出
function logout() {
  //清空token
  tokenStore.$reset();
  userStore.$reset();
  //编程式导航
  router.push('/user/index');
  ElNotification({
    title: 'Success',
    message: '退出成功1.1~~~',
    type: 'success',
  });
}
getParent()
</script>


<style scoped>
.nav_bg ul li {
  float: left;
  margin-right: 20px;
}

a:hover {
  color: #FFF;
}

.nav_bg {
  background: #333;
  line-height: 40px;
}

a {
  color: #999;
}

.user li {
  float: right;
}

.search_input {
  width: 260px;
  float: right;
}

.search_btn {
  color: white;
  float: right;
  margin-left: 5px;
  border-radius: 0;
  border: 0;
  background-color: var(--theme-color);
}

.search {
  padding-top: 20px;
}

.search_btn:hover {
  background-color: wheat;
}

.category {
  background-color: var(--theme-color);
  line-height: 30px;
}

.category li {
  float: left;
  padding: 0 10px;
}

.category li a {
  color: white;
  font-weight: bold;
}

.category li:hover {
  background-color: black;
}

.shop {
  margin-top: 4px;
}
</style>
